<template>
  <div>
    <!--用户头像和背景  昵称 学习时长 粉丝 关注等-->
    <div class="uiuserbanner">
      <div style="height: 2rem;">
        <span style="color: white;margin-left: 4%;"><a @click="tohome" class="home">首页</a>>我的订单</span>
      </div>
      <div style="height: 18rem;">
        <div style="width:  14rem;height: 14rem;margin-left: 3%;float: left;">
          <img style="width: 14rem;height: 14rem;border-radius: 100%;border:0.45rem solid wheat;margin: 1rem;" :src="loginInfo.avatar" />
        </div>
        <div style="width:  36rem;height: 10rem;float: left;margin-top: 2rem;margin-left: 2rem;">
          <div>
            <h1 style="color: white;font-size: large;font-weight: bolder;">{{loginInfo.nickname}}</h1>
          </div>
          <div>
            <span v-if="loginInfo.sex==2" style="color: white;">男</span><span v-if="loginInfo.sex!=2" style="color: white;">女</span>&nbsp;&nbsp;&nbsp;<span style="color: white;">|</span>&nbsp;&nbsp;&nbsp;<span v-if="loginInfo.age!=null" style="color: white;">{{loginInfo.age}}</span>
            <span v-if="loginInfo.age==null" style="color: white;">0岁</span>
          </div>
          <div>
            <span style="color: white;">不夜城</span>
          </div>
        </div>
        <div style="width:  20rem;height: 10rem;float: left;margin-top: 4rem;margin-left: 35%;">
          <div>
             <h4 style="color: white;font-size: large;font-weight: bolder;text-align: center;">25H-04M-04S</h4>
          </div>
          <div>
            <h4 style="color: white;font-size: large;font-weight: bolder;text-align: center;">学习时长</h4>
          </div>
        </div>
        <div style="width:  8rem;height: 10rem;float: left;margin-top: 4rem;">
          <div>
            <h4 style="color: white;font-size: large;font-weight: bolder;text-align: center;">5</h4>
          </div>
          <div>
            <h4 style="color: white;font-size: large;font-weight: bolder;text-align: center;">我的关注</h4>
          </div>
        </div>
      </div>

    </div>


    <!-- 内容 -->
    <div class="scontentx">
      <!-- 我的课程 -->
      <div style="width: 119rem;margin-left: auto;margin-right: auto;">
        <div class="menux">
          <el-tabs v-model="first">
              <el-tab-pane name="已支付">
                <span @click="payed" slot="label">已支付</span>
                <div v-for="order in this.currentorderinfo" style="width: 100%;height: 14rem;margin-top: 1rem;">
                  <div style="width: 20%;height: 100%;float: left;">
                    <img style="width: 96%;height:96%;margin-top: 2%;margin-left: 2%;" :src="order.coursecover" />
                  </div>
                  <div style="width: 80%;height: 100%;float: left;background-color: #F2F2F2;">
                    <div style="margin-top: 0.5rem;margin-left: 0.25rem;">
                      <!-- <span v-if="course.free=='免费'" style="background-color: #CCCCCC;color: #7F828B;font-size: 0.6875rem;">免费课</span>
                      <span v-if="course.free=='付费'" style="background-color: #CCCCCC;color: #7F828B;font-size: 0.6875rem;">付费课</span> -->
                      &nbsp;&nbsp;<span style="font-weight: bolder;color: #AAAAAA;">订单号 {{order.ordernumber}}</span>
                    </div>
                    <div style="margin-top: 0.5rem;margin-left: 0.25rem;">
                      <!-- <span v-if="course.free=='免费'" style="background-color: #CCCCCC;color: #7F828B;font-size: 0.6875rem;">免费课</span>
                      <span v-if="course.free=='付费'" style="background-color: #CCCCCC;color: #7F828B;font-size: 0.6875rem;">付费课</span> -->
                      &nbsp;&nbsp;<span style="font-weight: bolder;color: goldenrod;">{{order.coursetitle}}</span>
                       &nbsp;&nbsp;<span style="font-weight: bolder;color: orangered;">{{order.price}}￥</span>
                    </div>
                    <div v-if="order.teachername!=null" style="margin-top: 0.5rem;margin-left: 0.25rem;height: 5rem;">
                      <img style="border-radius: 100%;width: 5rem;height: 5rem;margin-left: -7rem;border: 0.2rem solid whitesmoke;" :src="order.teacheravatar"/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: bolder;color: goldenrod;">讲师:{{order.teachername}}</span>
                       &nbsp;&nbsp;<span style="font-weight: bolder;color: goldenrod;">{{order.teachercareer}}</span>
                    </div>
                   <div v-if="order.teachername==null" style="margin-top: 0.5rem;margin-left: 0.25rem;height: 5rem;">

                    </div>
                    <div style="margin-top: 0.25rem;margin-left: 0.25rem;width: 100%;">
                      <div style="width: 48.75rem;float: left;">
                        <span style="font-weight: bolder;color: #AAAAAA;">下单时间:{{order.makeordertime}}</span>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: bolder;color: #AAAAAA;">支付时间:{{order.paytime}}</span>
                      </div>
                      <div style="width: 10rem;float: left;margin-left: 35.5rem;">
                        <el-button @click="uilogicdeleteorderx(order.ordernumber)" style="color: white;background-color: wheat;border: 0.1rem solid wheat;"  type="danger" size="mini">删除记录</el-button>
                      </div>
                    </div>
                  </div>
                </div>

              </el-tab-pane>

              <el-tab-pane name="待支付">
                <span @click="notpayed" slot="label">待支付</span>
                <div v-for="order in this.currentorderinfo" style="width: 100%;height: 14rem;margin-top: 1rem;">
                  <div style="width: 20%;height: 100%;float: left;">
                    <img style="width: 96%;height:96%;margin-top: 2%;margin-left: 2%;" :src="order.coursecover" />
                  </div>
                  <div style="width: 80%;height: 100%;float: left;background-color: #F2F2F2;">
                    <div style="margin-top: 0.5rem;margin-left: 0.25rem;">
                      <!-- <span v-if="course.free=='免费'" style="background-color: #CCCCCC;color: #7F828B;font-size: 0.6875rem;">免费课</span>
                      <span v-if="course.free=='付费'" style="background-color: #CCCCCC;color: #7F828B;font-size: 0.6875rem;">付费课</span> -->
                      &nbsp;&nbsp;<span style="font-weight: bolder;color: #AAAAAA;">订单号 {{order.ordernumber}}</span>
                    </div>
                    <div style="margin-top: 0.5rem;margin-left: 0.25rem;">
                      <!-- <span v-if="course.free=='免费'" style="background-color: #CCCCCC;color: #7F828B;font-size: 0.6875rem;">免费课</span>
                      <span v-if="course.free=='付费'" style="background-color: #CCCCCC;color: #7F828B;font-size: 0.6875rem;">付费课</span> -->
                      &nbsp;&nbsp;<span style="font-weight: bolder;color: goldenrod;">{{order.coursetitle}}</span>
                       &nbsp;&nbsp;<span style="font-weight: bolder;color: orangered;">{{order.price}}￥</span>
                    </div>
                    <div v-if="order.teachername!=null" style="margin-top: 0.5rem;margin-left: 0.25rem;height: 5rem;">
                      <img style="border-radius: 100%;width: 5rem;height: 5rem;margin-left: -7rem;border: 0.2rem solid whitesmoke;" :src="order.teacheravatar"/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: bolder;color: goldenrod;">讲师:{{order.teachername}}</span>
                       &nbsp;&nbsp;<span style="font-weight: bolder;color: goldenrod;">{{order.teachercareer}}</span>
                    </div>
                   <div v-if="order.teachername==null" style="margin-top: 0.5rem;margin-left: 0.25rem;height: 5rem;">

                    </div>
                    <div style="margin-top: 0.25rem;margin-left: 0.25rem;width: 100%;">
                      <div style="width: 48.75rem;float: left;">
                        <span style="font-weight: bolder;color: #AAAAAA;">下单时间:{{order.makeordertime}}</span>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                      </div>
                      <div style="width: 20rem;float: left;margin-left: 25.5rem;">
                        <el-button @click="gotopay(order.courseid)" style="color: white;background-color: orange;border: 0.1rem solid orange;"  type="danger" size="mini">去支付</el-button>
                        <el-button @click="uilogicdeleteorderxx(order.ordernumber)" style="color: white;background-color: wheat;border: 0.1rem solid wheat;"  type="danger" size="mini">取消订单</el-button>
                      </div>
                    </div>
                  </div>
                </div>

              </el-tab-pane>
            </el-tabs>
        </div>
        <div>
           <el-pagination
             class="page"
             background
             layout="total,prev, pager, next"
             prev-text="上一页"
             next-text="下一页"
             :page-size="10"
             :current-page="current"
             @current-change="handleCurrentChange"
             :total="total">
           </el-pagination>
         </div>
      </div>
      <!-- 分页 -->
    <div class="clear"></div>
   </div>



    <el-backtop style="color: #B8860B;">
      ^
    </el-backtop>

    <!-- 这是用户中心_id,用户的id是： {{this.$route.params.id}}sss -->
  </div>
</template>

<script>
  import uiusercenter from '@/api/edu/uiusercenter/uiusercenter'
  import cookie from 'js-cookie'
  export default{
    data(){
      return{
      loginInfo: null,
      first: '已支付',

     allorderinfo: [],
     splitedorderifo: [],
     currentorderinfo: [],
     total: 0,
     current: 1,
     // this.allcourseinfo=response.data.data.eduCourses
     // this.total=this.allcourseinfo.length
     // this.splitedcouseifo=this.group(this.allcourseinfo,10);
     // console.log('测试分页结果：',this.splitedcouseifo)
     // this.currentcourseinfo=this.splitedcouseifo[0]
      }
    },
    created(){
      this.getuserid()
  },
    methods:{
      //取消订单  也是逻辑删除
      uilogicdeleteorderxx(orderno){
        uiusercenter.uilogicdeleteorder(orderno).then(response => {
          if(response.data.data.a==true){
            this.notpayed()
            this.$message({
              type: 'success',
              message: '取消订单成功'
            })
          }else{
            this.$message({
              type: 'error',
              message: '取消失败'
            })
          }
        })
      },
      //逻辑删除订单记录
      uilogicdeleteorderx(orderno){
        uiusercenter.uilogicdeleteorder(orderno).then(response => {
          if(response.data.data.a==true){
            this.payed()
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          }else{
            this.$message({
              type: 'error',
              message: '删除失败'
            })
          }
        })
      },
      //去支付
      gotopay(courseid){
        let newaddr=this.$router.resolve({
          path: '/course/'+courseid
        })
        window.open(newaddr.href,"_blank")
        // document.querySelector('body').innerHTML = addr;
        // const div = document.createElement('div');
        // div.innerHTML = addr;
        // document.body.appendChild(div);
        // // document.forms[0].setAttribute('target', '_blank');// 打开新窗口页面

        // document.forms[0].submit();
        // this.$router.replace('/myorder/'+this.loginInfo.id)
      },
      //已支付
      payed(){
        uiusercenter.getorderinfobyuser(this.loginInfo.id,'1').then(response =>{
          this.allorderinfo=response.data.data.orderVo
          this.total=this.allorderinfo.length
          this.splitedorderifo=this.group(this.allorderinfo,10);
          console.log('测试分页结果：',this.splitedorderifo)
          this.currentorderinfo=this.splitedorderifo[0]
        })
      },
      notpayed(){
        uiusercenter.getorderinfobyuser(this.loginInfo.id,'0').then(response =>{
          this.allorderinfo=response.data.data.orderVo
          this.total=this.allorderinfo.length
          this.splitedorderifo=this.group(this.allorderinfo,10);
          console.log('测试分页结果：',this.splitedorderifo)
          this.currentorderinfo=this.splitedorderifo[0]
        })
      },
     group(array, subGroupLength) {
           let index = 0;
           let newArray = [];
           while(index < array.length) {
               newArray.push(array.slice(index, index += subGroupLength));
           }
           return newArray;
       },
     handleCurrentChange(page){
       this.currentorderinfo=this.splitedorderifo[page-1]
     },
      //获取用户id
      getuserid(){
        if(cookie.get("uicenterMember")){
          // console.log('测试登录信息存在情况:',cookie.get("uicenterMember"))
          this.loginInfo=JSON.parse(cookie.get("uicenterMember"))
          // this.uid=this.loginInfo.id
          console.log('测试登录信息存在情况1:',this.loginInfo)
          this.payed()
        }else{
         console.log('还没有登录')
         this.loginInfo=null
         // this.uid=''
        }
      },
      tohome(){
        location.replace('/')
      },

    }
  }
</script>

<style>
 .menux .el-tabs__item{
             width: 70px;
             height: 35px;
             padding: 0;
             text-align: center;
             line-height: 35px;
             font-size: 30px;
             color: #FFE8A9;
             /* border-radius: 40px; */
           }
   .menux .el-tabs__header {
   color: #47494E;
   margin-left: auto;
   margin-right: auto;
   width: 100%;
 }
   .menux .el-tabs__nav .el-tabs__item{
     font-size: 15px;
     color: #47494E;
   }
   .menux .el-tabs__active-bar{
             /* display: none; */
             background-color: goldenrod;
             width: 1.875rem;
    }
    .menux .el-tabs__item.is-active{
             color: goldenrod;
             /* background-image: linear-gradient(-20deg, #616161 0%, #9bc5c3 100%); */
             text-align: center;
           }



  .uibnt:hover{
    background-color: #FFE8A9;
  }
  .uiuserbanner{
    background-image: url(../../assets/img/uiuserbanner.png);
    width: 136.6rem;
    height: 14rem;
  }
  .scontentx{
    margin-top: 3.5rem;
    width: 130rem;
    /* height: 145rem; */
    height:auto!important;
    margin-left: auto;
    margin-right: auto;
    /* margin-bottom: 2rem; */
    /* background-color: red; */
  }
  .home{
    color: white;
    text-decoration: none;
  }
  .home:hover{
    color: goldenrod;
    text-decoration: none;
  }


 .page{
   text-align: center;
   margin-top: 1.25rem;
  }
 /*带背景的分页按钮背景色begin*/
 .el-pagination.is-background .el-pager li:not(.disabled).active {
   background-color: #08C0B9;
   color: #FFF;
 }
 .el-pagination.is-background .el-pager li.active {
   color: #fff;
   cursor: default;
 }
 .el-pagination.is-background .el-pager li:hover {
   color: #08C0B9;
 }
 .el-pagination.is-background .el-pager li:not(.disabled):hover {
   color: #08C0B9;
 }
 .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
   background-color: #08C0B9;
   color: #FFF;
 }
 /*带背景的分页按钮背景色end*/


 /*不带背景的分页按钮背景色begin*/
 .el-pager li.active {
   color: #08C0B9;
   cursor: default;
 }
 .el-pagination .el-pager li:hover {
   color: #08C0B9;
 }
 .el-pagination .el-pager li:not(.disabled):hover {
   color: #08C0B9;
 }

</style>
